<template>
    <h4>{{ sayHi }}</h4>
    <h4>{{ count }}</h4>
    <button @click="clickCallback">点击一下！</button>
    <button @click="count++">+1</button>
    <div>
        姓名：<input type="text" v-model="person.name">
    </div>
    <div>
        年龄：<input type="number" v-model="person.age">
    </div>
    <div>
        薪资：<input type="number" v-model="person.job.salary">
    </div>
</template>
  
<script>
import { reactive, ref, watch } from "vue";

export default {
    name: "Demo",


    setup() {
        let sayHi = ref('你好呀!')
        let count = ref(0)

        const person = ref({
            name: '张三',
            age: 44,
            job: {
                salary: 5000
            }
        })

        /**
         * 如果监视的是一个 ref 包装对象类型数据，直接对该对象本身进行监视并不生效（因为该 refImp 对象的 value 并没有变化）
         * 解决方法一：需要监视其 value（value 为 ref 调用的 reactive 函数产生的数据），才能 watch 到其变化
         * 解决方法二：配置项中使其支持深度检测（{deep: true}）
         */
        watch(person, (newValue, preValue) => {
            console.log('newValue:', newValue)
            console.log('preValue:', preValue)
        }, { deep: true })


        const clickCallback = () => {
            sayHi.value += '!'
        }

        return {
            sayHi,
            count,
            person,
            clickCallback
        }
    }
};
</script>
  
<style></style>
  